<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="box">
    <div class="forms">
        <div class="tips">
            <span class="login-btn">
            login
        </span>
            <span class="register-btn">
            register
        </span>
        </div>
        <div class="login">
            <div class="form-title">
                <h1>Hello</h1>
                <h4>One click triple connection</h4>
            </div>
            <div class="form">
                <div class="username input-item">
                    <input type="text" class="ipts">
                </div>
                <div class="password input-item">
                    <input type="password" class="ipts">
                </div>
                <div class="other-select">
                    <div class="rem-pwd">
                        <input type="checkbox" class="checkbox" id="check">
                        <label for="check"></label>
                    </div>
                    <span class="fogot-pwd-btn">forgot password</span>
                </div>
                <button class="btn">Login</button>
                <div class="other-login">
                    <span>Other login methods</span>
                    <div class="login-img">
                        <img src="statis/QQ.png" alt="QQ">
                        <img src="statis/weiixn.png" alt="微信">
                    </div>
                </div>
            </div>
        </div>
        <div class="register">
            <div class="form-title">
                <h1>register</h1>
                <h4>One click triple connection</h4>
            </div>
            <div class="form">
                <div class="username input-item">
                    <input type="text" class="ipts">
                </div>
                <div class="password input-item">
                    <input type="password" class="ipts">
                </div>
                <div class="conform-password input-item">
                    <input type="password" class="ipts">
                </div>
                <button class="btn">register</button>
            </div>
        </div>
        <div class="forgot-pwd">
            <div class="form-title">
                <h1>forgot-pwd</h1>
                <h4>One click triple connection</h4>
            </div>
            <div class="form">
                <div class="username input-item">
                    <input type="text" class="ipts">
                </div>
                <div class="password input-item">
                    <input type="password" class="ipts">
                </div>
                <div class="code input-item">
                    <input type="password" class="ipts">
                    <span class="veri-code-tips">
                    Click To Get
                </span>
                </div>
                <button class="btn">Confirm</button>
            </div>
        </div>
    </div>
</div>
<script>
    const login = document.querySelector('.login')
    const register = document.querySelector('.register')
    const fogotPwd = document.querySelector('.forgot-pwd')
    const registerBtn = document.querySelector('.register-btn')
    const loginBtn = document.querySelector('.login-btn')
    const fogotPwdBtn = document.querySelector('.fogot-pwd-btn')
    const veriCodeTips = document.querySelector('.veri-code-tips')
    let reckonTimeFlag = 5
    let reckonTime
    function countDown(){
        veriCodeTips.innerHTML = `RESEND(${reckonTimeFlag})`
        reckonTimeFlag--
        if(reckonTimeFlag < 0){
            clearInterval(reckonTime)
            reckonTimeFlag = 5
            veriCodeTips.innerHTML = `Click To Get`
            veriCodeTips.style.color = "rgb(113,123,185)"
            veriCodeTips.onclick = veriCodeTipsClick
        }
    }
    function veriCodeTipsClick(){
        veriCodeTips.onclick = null
        veriCodeTips.style.color = "rgb(153,151,151)"
        reckonTime = setInterval(countDown,1000)
        countDown()
    }
    veriCodeTips.addEventListener('click',function (){
        veriCodeTipsClick()
    })
    veriCodeTips.addEventListener('click',function (){
        login.style.opacity = '1'
        fogotPwd.style.opacity = '0'
        register.style.opacity = '0'
        login.style.zIndex = '10'
        fogotPwd.style.zIndex = '-1'
        register.style.zIndex = '-1'
        register.style.animation = 'none'
        login.style.animation = 'into is ease'
        fogotPwd.style.animation = 'none'
        registerBtn.style.borderBottom = 'none'
        registerBtn.style.color = 'rgb(249,177,122)'
        loginBtn.style.borderBottom = '4px solid rgb(249,177,122)'
        loginBtn.style.color = '#fff'
    })
    fogotPwdBtn.addEventListener('click',function (){
        login.style.opacity = '0'
        fogotPwd.style.opacity = '1'
        register.style.opacity = '0'
        login.style.zIndex = '-1'
        fogotPwd.style.zIndex = '0'
        register.style.zIndex = '-1'
        register.style.animation = 'none'
        login.style.animation = 'none'
        fogotPwd.style.animation = 'into is ease'
    })
</script>
</body>
</html>